<template>
  <a-modal
    v-model:visible="showComputed"
    width="888px"
    title="Apply For Extension"
    wrap-class-name="primary-modal unlimited-height"
    ok-text="Apply"
    :ok-button-props="{ disabled: !buttonAvailable }"
    :destroy-on-close="true"
    @cancel="showComputed = false"
    @ok="handleApplyForExtension"
  >
    <a-form ref="createFormRef" layout="vertical" :rules="createFormRules" :model="createForm">
      <a-row :gutter="gutter">
        <a-col :span="24">
          <a-form-item label="Reason" name="reason">
            <a-textarea v-model:value="createForm.reason" :auto-size="{ minRows: 4, maxRows: 4 }" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="Auditor" name="auditor">
            <a-select
              v-model:value="createForm.auditor"
              show-search
              option-filter-prop="label"
              option-label-prop="label"
              placeholder="Please select"
            >
              <a-select-option v-for="auditor in auditors" :key="auditor.empID" :label="auditor.displayName">
                {{ auditor.displayName }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script setup>
import { computed, watch, inject, reactive, ref } from 'vue'
import Contract from '@/api/client/contract.js'
import { OPERATION_SUCCESSFUL } from '@/constants/message.js'
const { message } = inject('Feedback')
const props = defineProps({
  show: Boolean,
  clientId: [Number, String],
  autoInject: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits(['update:show', 'status-changed'])
const showComputed = computed({
  get: () => props.show,
  set: val => emits('update:show', val)
})
// Apply for extension
const gutter = [24, 8]
const auditors = ref([])
const createForm = reactive({
  reason: null,
  auditor: null
})
const createFormRef = ref(null)
const createFormRules = {
  reason: [
    {
      required: true,
      message: 'Please Input Reason',
      trigger: 'blur'
    }
  ],
  auditor: [
    {
      required: true,
      message: 'Please Select Auditor',
      trigger: 'change'
    }
  ]
}
const buttonAvailable = ref(true)
const getAuditors = () => {
  Contract.getApplyForExtensionAuditors(parseInt(props.clientId)).then(({ data }) => {
    auditors.value = data
  })
}
getAuditors()
const handleApplyForExtension = () => {
  createFormRef.value.validate().then(() => {
    buttonAvailable.value = false
    Contract.addApplyForExtension(parseInt(props.clientId), createForm.auditor, createForm.reason)
      .then(() => {
        message.success(OPERATION_SUCCESSFUL)
        showComputed.value = false
        emits('status-changed')
      })
      .finally(() => {
        buttonAvailable.value = true
      })
  })
}
watch(
  () => showComputed.value,
  value => {
    if (value) {
      createForm.reason = null
      createForm.auditor = null
    }
  }
)
</script>

<style scoped></style>
